<template>
  <AModalPro width="600px" v-bind="$attrs" title="图片裁剪" :maskClosable="false" destroyOnClose @ok="onFinish">
    <RCropper
      v-model:cropper="cropper"
      :src="props.src"
      :aspectRatio="props.aspectRatio"
      :showSubmit="false"
    ></RCropper>
  </AModalPro>
</template>

<script setup>
import { ref, toValue } from 'vue';
import { RCropper } from '@/components/custom';
import { AModalPro } from '@/components/iteration';

defineOptions({
  inheritAttrs: false
});

const props = defineProps({
  aspectRatio: { typeof: 'number', default: 16 / 9 },
  src: { type: String, default: '' }
});

const emit = defineEmits(['ok']);

const cropper = ref(null);
const onFinish = () => {
  toValue(cropper)
    .getCroppedCanvas()
    .toBlob((blob) => emit('ok', blob));
};
</script>

<style lang="scss" scoped></style>
